---
interface Props {
  title?: string
  class?: string
  url: string
}

let { class: className, title, url, ...props } = Astro.props
---

<a class:list={['link', className]} href={url} {...props}>
  <slot name="icon" />
  <div class="content">
    {title && <span class="title">{title}</span>}
    <span class="text">
      <slot />
    </span>
  </div>

  <style>
    .link {
      display: inline-flex;
      gap: var(--space-s);
      align-items: center;
      font: var(--font-xs);
      text-decoration: none;
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .title {
      font-size: var(--font-size-2xs);
      line-height: 1;
      color: var(--color-content-secondary);
      text-decoration: none;
    }

    .text {
      text-decoration: underline;
    }
  </style>
</a>
